import { defineComponent, reactive, ref } from "vue";
import styles from "./index.module.less";
import Page from "@/components/Page/Page";
import TableSection from "@/components/TableSection/TableSection";
import SearchForm from "@/components/SearchForm/SearchForm";
import baseStatusDict from "@/common/dicts/baseStatusDict";
import useTableHook from "@/common/hooks/useTableHook";
import Toolbar from "@/components/Toolbar/Toolbar";
import { useRouter } from "vue-router";
export default defineComponent({
  name: "BaseTemplateMgr",
  setup() {
    const searchFormRef = ref(null as any);
    const tableHook = useTableHook();
    const router = useRouter();
    const state = reactive({
      searchForm: [
        {
          key: 'name',
          label: "模板名称",
          value: null,
          type: "input",
          attrs: {},
        },
        {
          key: 'status',
          label: "状态",
          value: null,
          type: "select",
          datas: baseStatusDict,
          attrs: {},
        },
      ],
      toolbar: [
        {
          el: () => <a-button type="primary">查询</a-button>
        },
        {
          el: () => <a-button type="primary" onClick={() => { router.push({ name: "BaseTemplateAdd" }) }}>新增</a-button>
        },
        {
          el: () => <a-button type="primary" disabled={tableHook.state.selectedRowKeys?.length === 0}>启用</a-button>
        },
        {
          el: () => <a-button type="primary" danger disabled={tableHook.state.selectedRowKeys?.length === 0}>禁用</a-button>
        },
      ]
    })
    tableHook.defineColumns([
      {
        title: "序号",
        dataIndex: "index",
        align: "center",
        width: "50px",
      },
      {
        title: "模板编码",
        dataIndex: "code",
        align: "center",
      },
      {
        title: "模板名称",
        dataIndex: "name",
        align: "center",
      },
      {
        title: "模板类型",
        dataIndex: "type",
        align: "center",
      },
      {
        title: "使用状态",
        dataIndex: "status",
        align: "center",
      },
      {
        title: "创建时间",
        dataIndex: "createTime",
        align: "center",
      },
      {
        title: "创建人",
        dataIndex: "createUserName",
        align: "center",
      },
      {
        title: "修改时间",
        dataIndex: "updateTime",
        align: "center",
      },
      {
        title: "修改人",
        dataIndex: "updateUserName",
        align: "center",
      },
    ])
    const getList = () => {
      return new Promise((resolve) => {
        setTimeout(() => {
          resolve({
            data: [{
              id: 1,
              code: "PB001",
              name: "商务标一",
              type: "商务标",
              status: 1,
              createTime: "2025-04-28 13:44:21",
              createUserName: "admin",
              updateTime: "2025-04-28 13:44:21",
              updateUserName: "admin",
            }, {
              id: 2,
              code: "PB002",
              name: "商务标二",
              type: "商务标",
              status: 1,
              createTime: "2025-04-28 13:44:21",
              createUserName: "admin",
              updateTime: "2025-04-28 13:44:21",
              updateUserName: "admin",
            }, {
              id: 3,
              code: "PB003",
              name: "技术商务标测试",
              type: "技术标+商务标",
              status: 0,
              createTime: "2025-04-28 13:44:21",
              createUserName: "admin",
              updateTime: "2025-04-28 13:44:21",
              updateUserName: "admin",
            }]
          })
        }, 1000)
      })
    }

    tableHook.setSyncDataSource(getList);
    return () => (
      <Page>
        <div class={styles.template}>
          <TableSection
            v-slots={{
              searchForm: () => <SearchForm ref={searchFormRef} v-model:config={state.searchForm} />,
              toolbar: () => <Toolbar v-model:config={state.toolbar} />,
              table: () => <a-table
                bordered={true}
                scroll={{ x: "max-content" }}
                columns={tableHook.state.columns}
                dataSource={tableHook.state.dataSource}
                loading={tableHook.state.loading}
                rowKey="id"
                pagination={tableHook.state.pagination}
                rowSelection={tableHook.rowSelection.value}
                v-slots={{
                  bodyCell: ({ column, record, index, text }) => {
                    if (column.dataIndex === 'index') {
                      return tableHook.getIndex(index);
                    }
                    if (column.dataIndex === 'status') {
                      const status = baseStatusDict.find(x => x.value === record.status);
                      return <span class={`${status?.type}-font`}>{status?.label}</span>;
                    }
                  }
                }}
              />,
            }}
          />
        </div>
      </Page>
    )
  }
})